<template>
  <div class='container'>
    <a-popover trigger='click' v-if='!disabled'>
      <template slot='content'>
        <sketch-picker v-model='colors' />
      </template>
      <div class='priview-color' :style='computeCurrentColor'></div>
    </a-popover>

    <a-tooltip v-else>
      <template slot='title'>
        饼图暂不支持设置监控项颜色
      </template>
      <div class='priview-color' :style='computeCurrentColor'></div>
    </a-tooltip>
  </div>
</template>

<script>
import { Sketch } from 'vue-color'//有6中风格，用哪种直接引用对应的名字就行
export default {
  components: {
    'sketch-picker': Sketch
  },
  props: {
    value: {
      type: String,
      default () {
        return '#4470d8'
      }
    },
    disabled: {
      type: Boolean
    }
  },
  computed: {
    computeCurrentColor () {
      console.log(this.disabled)
      if (this.disabled) {
        return {
          backgroundColor: this.value || this.colors.hex,
          opacity: 0.4,
          cursor: 'not-allowed'
        }
      }
      return {
        backgroundColor: this.value || this.colors.hex
      }
    }
  },
  mounted () {
  },
  watch: {
    colors (val) {
      this.$emit('change', val.hex)
    }
  },
  data () {
    return {
      colors: {
        hex: '#4470d8',
        hex8: '#194D33A8',
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
        rgba: { r: 25, g: 77, b: 51, a: 1 },
        a: 1
      }
    }
  }
}
</script>

<style lang='less' scoped>
.container {
  height: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 3px;
}

.priview-color {
  cursor: pointer;
  width: 25px;
  height: 25px
}
</style>